import React, { Component, Fragment } from "react";
import { inject, observer } from "mobx-react";
import { ListViewPage, RouteLayout } from 'weaver-mobile-page';
import { withRouter, Route } from 'react-router-dom';
import { toJS } from "mobx";
import { Tools, Icon } from 'weaver-mobile';

import SearchConponent from "../common/SearchConponent"
import RecDocDetailComponent from "./RecDocDetailComponent";
import * as allFun from "../../../workflowForm/util/forwardPage";

const getLabel = Tools.getLabel;

@withRouter
@inject("docLedgerStore")
@observer
class DocLedger extends Component {

  prefixCls = 'odoc-ledger'

  componentDidMount() {
    const { docLedgerStore } = this.props;
    docLedgerStore.getData({}, 1, true);
    docLedgerStore.getUserId();
  }

  componentWillUnmount() {
    const { docLedgerStore } = this.props;
    docLedgerStore.setMobxState({ allSubWF: {} })
  }

  render() {
    const { location: { pathname } } = this.props
    const { docLedgerStore } = this.props;
    const { list, layout, getSubWF } = docLedgerStore;
    return (
      <div className={this.prefixCls}>

        <SearchConponent
          getCondition={{
            url: "/api/odoc/odocSearchReq/getCondition",
          }}// 高级搜索form表单接口参数  默认是 没有url，post，没有参数
          pathname={pathname} //原页面地址
          extraButton={["advanced"]}
          getSearchData={formParams => this.getSearchData(formParams, 1, true)}
          baseSearchKey={"requestname"}
        />

        <ListViewPage.Normal
          className={`${this.prefixCls}-list`}
          showCheck={false}
          store={list}
          rowKey="requestid"
          withSwipeAction
          swipeActionProps={this.getSwipeActionProps()}
          getRowProps={this.getRowProps}
          getTemplate={() => this.getTemplate()}
          renderSeparator={this.renderSeparator}
          onRowClick={rowData => this.forwardPage(rowData)}
          getDataCustom={true}
          onEndReached={(current) => this.getSearchData(null, current, false)}
        />

        <Route
          key={layout.id}
          path={layout.path}
          render={(props) => {
            return (
              <RouteLayout>
                <div
                  key="wmPoutePageDemo"
                  className="wm-route-layout"
                >
                  <RecDocDetailComponent />
                </div>
              </RouteLayout>
            )
          }}
        />
      </div>
    )
  }

  getSearchData(formParams, current, refresh) {
    const { docLedgerStore } = this.props;
    docLedgerStore.getData(formParams, current, refresh);
  }

  getSwipeActionProps = () => {
    const { history, docLedgerStore } = this.props;
    return ({
      right: [
        {
          text: getLabel("502013", "查看收文详情"),
          onPress: (data) => {
            history.push({
              pathname: docLedgerStore.layout.path,
              query: { receiveId: data.document_identifierspan },
            })
          },
          className: `${this.prefixCls}-check`,
        },
      ],
    })
  }

  getTemplate() {
    const _this = this;
    const newTemplate = {
      default: [
        {
          key: 'col1',
          style: { flex: 'none' },
          render(item) {
            if (item.subrequestInfospan === '1') {
              return <div className={`odoc-todo-table-icon`} data-click="canClick" data-requestid={item.requestid} onClick={(e) => _this.extends(e)} >+</div>
            } else {
              return <div className={`odoc-todo-table-noicon`}></div>
            }
          },
        },
        {
          key: 'col3',
          configs: [
            {
              key: 'row1',
              render(item) {
                return <div className="wm-list-page-item-row-span-text-highlight">
                  {item.requestname}
                  {item.viewtypespan === '0' && <span className="redDot"></span>}
                  {item.viewtypespan === '1' && <span className="yellowDot"></span>}
                  {item.viewtypespan === '3' && <span className="purpleDot"></span>}
                </div>
              },
            },
            {
              key: 'row2',
              style: { color: '#999999' },
              configs: [{ key: 'createrspan', style: { marginRight: '10px' } }, { key: 'createdatespan' }],
            }
          ]
        },
      ],
    };
    return newTemplate;
  }

  renderSeparator = (section, index) => {
    const { list, allSubWF, requestedSubWF } = this.props.docLedgerStore;
    const data = toJS(list.data)
    const subrequestInfospan = data[index].subrequestInfospan;
    const subWFLength = Object.keys(allSubWF).length
    if (requestedSubWF && subWFLength > 0 && subrequestInfospan == '1') {
      return (
        <div div key={index} id={`${data[index].requestid}`} className="subItem" onClick={() => this.forwardPage(data[index].requestid)}>
          {
            Object.keys(allSubWF).map((item) => {
              if (item.includes(data[index].requestid + '_')) {
                return (
                  <div key={`sub` + index} className="subInfo">
                    <div className={`odoc-todo-table-noicon`}></div>
                    <div>
                      <div className="odoc-ledger-table-item-title">{allSubWF[item].showlink}</div>
                      <div>
                        <span className="odoc-ledger-table-item-creater">{allSubWF[item].creater}</span>
                        <span className="odoc-ledger-table-item-createdatetime">{allSubWF[item].createdatetime}</span>
                      </div>
                    </div>
                  </div>
                )
              } else {
                return <Fragment />
              }
            })
          }
        </div>
      )
    }
  }

  extends(e) {
    e.preventDefault();
    e.stopPropagation();
    const click = e.currentTarget.getAttribute("data-click");
    const requestid = e.currentTarget.getAttribute("data-requestid");
    const subItemDom = document.getElementById(`${requestid}`);
    if (click == "canClick") {
      subItemDom.style.display = "block";
      e.currentTarget.innerHTML = "-";
      e.currentTarget.setAttribute("data-click", "notClick")
    } else if (click == "notClick") {
      subItemDom.style.display = "none";
      e.currentTarget.innerHTML = "+";
      e.currentTarget.setAttribute("data-click", "canClick")
    }
  }

  forwardPage(rowData) {
    const { userId } = this.props.docLedgerStore;
    allFun.forwardViewForm('requestid=' + rowData.requestid + '&f_weaver_belongto_userid=' + userId, (arg) => {
    }, "portal")
  }

}

export default DocLedger;